<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true" :custom="true">
			<text slot='center-slot' class="center-slot">设置</text>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>

		<!-- 我的baby -->
		<view class="" style="height: 40rpx;">

		</view>
		<view class="top-box">
			<view class="top-cell justify-between align-center" @tap="setCategory(1)">
				<view class="my-qing-long">
					支付密码
				</view>
				<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
			<view class="top-cell justify-between align-center" @tap="setCategory(2)">
				<view class="my-qing-long">
					实名认证
				</view>
				<view class="justify-start align-center" v-if="!realName">
					<view class="name">
						去认证
					</view>

					<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
				</view>
				<view class="justify-start align-center" v-else>
					<view class="name-realname">
						{{userInfo.realname}}					({{userInfo.idcard}})	
					</view>
					
					<!-- <image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image> -->
				</view>
			</view>
			<view class="top-cell justify-between align-center" @tap="$navto('/pages/mine/setting/userSocial')">
				<view class="my-qing-long">
					社交设置
				</view>
				<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
		</view>
		<!-- <view class="top-box" @tap="$navto('/pages/mine/setting/aboutUs')">
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					关于我们
				</view>
				<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
		</view> -->
		<view class="top-box" @tap="$navto('/pages/mine/setting/logOff')">
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					注销账号
				</view>
				<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
		</view>
		<!-- #ifdef APP-PLUS --> 
		<view class="top-box" @tap="getAppInfo">
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					检查更新
					<view class="version">
						当前版本： {{prevVersion}}
					</view>
				</view>
				<image class="long-num" src="/static/images/mine/jiantou.svg" mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		<view class="btn justify-center align-center" @tap="signOut">
			退出登录
		</view>

		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">

				<view class="has-shuijing justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/appCenter/userRealName?type=payPass')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
		<!-- 升级弹窗 -->
		<!-- #ifdef APP-PLUS -->
		<xunUpgrade @close='close' :nextVersion="nextVersion" :content="content" :androidUrl="androidUrl" iosUrl=""
			:forceable="forceable"></xunUpgrade>
		<!-- #endif -->
	</view>
</template>

<script>
	import xunUpgrade from '@/components/xun-upgrade/xun-upgrade'
	export default {
		components:{
			xunUpgrade
		},
		data() {
			return {
				forceable: '0',
				nextVersion: '', //新app版本号
				androidUrl: '', //下载地址
				content: '', //更新内容
				current: 0,
				moneyShow: false,
				realName: false, //是否实名
				hotList: [{
						url: '/static/images/mine/order-all.svg',
						title: '全部'
					},
					{
						url: '/static/images/mine/order-dai.svg',
						title: '待付款'
					},
					{
						url: '/static/images/mine/order-fa.svg',
						title: '待发货'
					},
					{
						url: '/static/images/mine/order-shou.svg',
						title: '待收货'
					},

				],

				appList: [{
						url: '/static/images/mine/yaoqing.svg',
						title: '邀请好友'
					},
					{
						url: '/static/images/mine/box-archive.svg',
						title: '我的保管箱'
					},
					{
						url: '/static/images/mine/add-location.svg',
						title: '收货地址'
					},
					{
						url: '/static/images/mine/name.svg',
						title: '实名认证'
					},
					{
						url: '/static/images/mine/bangzhu.svg',
						title: '帮助中心'
					},

				],
				userInfo:{},
				prevVersion:'',

			}
		},
		onShow() {
			const value = uni.getStorageSync('userInfo')
			if (value) {
				this.userInfo = value
				this.realName = value.auth == 1 ? true : false
			}
			// #ifdef APP-PLUS
			this.getVersion()
			// #endif
		},
		methods: {
			close(){
				this.nextVersion = '000'
			},
			async getAppInfo() {
				const res = await uni.$postRequest('/api/v1/version')
				if (res.code == 200) {
					let {
						code,
						desc,
						download,
						is_forced_update
					} = res.data
					this.androidUrl = download
					this.nextVersion = code
					// this.nextVersion = '1.0.1'
					this.content = desc
					this.forceable = is_forced_update
					// this.$store.state.newVersion = code
					let oldv = this.prevVersion.replace(/\./g, '')
					let newv = this.nextVersion.replace(/\./g, '')
					if (Number(oldv) == Number(newv)) {
						uni.showToast({
							icon:'none',
							title: '已是最新版本'
						})
					}
				} else {
					uni.showToast({
						icon:'none',
						title: '获取更新失败'
					})
				}
			},
			getVersion(){
				// #ifdef APP-PLUS
				var _this = this
					plus.runtime.getProperty(plus.runtime.appid, function(inf) {
						_this.$store.state.version = inf.version
						// _this.$store.state.newVersion = _this.nextVersion
						_this.prevVersion = inf.version
						 var prevVersion = inf.version.replace(/\./g, '')
						// var nextVersion = _this.nextVersion.replace(/\./g, '')
						console.log(prevVersion);
						
					})
				// #endif
			},
			signOut() {
				uni.clearStorageSync('token')
				this.$navto('/pages/login/app-login', false, 3)
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			setCategory(value) {
				switch (value) {
					case 1:
						// 支付密码
						if (this.realName) {
							console.log('已实名');
							this.$navto('/pages/mine/setting/payPass/payPass')
						} else {
							this.moneyShow = true
						}
						break;
					case 2:
						// 支付密码
						if (this.realName) {
							console.log('已实名');
							this.$refs.uToast.show({
								message: '已实名',
								type: 'default',
								duration: '500'
							
							})
						} else {
							this.$navto('/pages/mine/appCenter/userRealName')
						}
						break;
					default:
						break;
				}
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;
		padding: 0 32rpx 60rpx;
		min-height: 100vh;

		.center-slot {
			color: #FFF;
		}




	}

	.btn {
		left: 50%;
		transform: translate(-50%, 0);
		right: 0;
		position: fixed;
		height: 90rpx;
		width: calc(100vw - 96rpx);
		border-radius: 8rpx;
		bottom: 120rpx;
		font-weight: 700;
		font-size: 30rpx;
		background-color: rgb(32, 32, 44);
		color: rgba(255, 255, 255, 0.8);
	}

	.top-box {
		width: 100%;
		position: relative;
		margin: 0rpx auto 24rpx;
		padding: 0rpx 32rpx;
		background-color: #20202c;
		border-radius: 16rpx;

		.top-cell {
			background: #20202c;
			height: 120rpx;
			padding: 20rpx 0;

			.name {
				margin-right: 30rpx;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);
			}
			.name-realname {
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);
			}
		}


		.my-qing-long {
			font-size: 28rpx;
			width: 260rpx;
			color: rgba(255, 255, 255, .8);
			text-align: left;
			.version{
				font-size: 20rpx;
				margin-top: 10rpx;
				color: rgba(255, 255, 255, .4);
			}
		}

		.long-num {
			width: 30rpx;
			height: 30rpx;

		}
	}

	.feature-app {
		height: 400rpx;
		width: 100%;
		padding: 46rpx 32rpx 0;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}

		.feature-box-app {
			margin: 32rpx 0 32rpx;
			width: 155rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}


	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}
</style>